<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>在线考试系统</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/demo/webuploader-demo.css">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>选择导入试题的科目</h5>
                        <div class="ibox-tools">
                           
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form role="form" class="form-inline">
                            <div class="form-group" col-md="6">
                                <label for="name">选择科目</label>
                                <select class="form-control">
                                  <option class="CS">计算机科学与技术</option>
                                  <option class="SE">软件工程</option>
                                  <option class="AI">人工智能</option>
                                </select>
                            <button class="btn btn-primary" type="button" id="btn-sure">确定</button>
                        </form>
                    </div>
                </div>
            </div>
        
            <div class="row" id="FileUpload">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>试题上传</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="page-container">
                                <p>您可以尝试文件拖拽，或者点击添加文件按钮.</p>
                                <div id="uploader" class="wu-example">
                                    <div class="queueList">
                                        <div id="dndArea" class="placeholder">
                                            <div id="filePicker">
                                                <input type="file" class="col-lg-offset-4 btn-primary" onchange="getExcelData(this)">"
                                            </div>
                                            <p id="tips">或将文件拖到这里</p>
                                        </div>
                                    </div>
                                    <div class="statusBar" style="display:none;">
                                        <div class="progress">
                                            <span class="text">0%</span>
                                            <span class="percentage"></span>
                                        </div>
                                        <div class="info"></div>
                                        <div class="btns">
                                            <div id="filePicker2"></div>
                                            <div class="uploadBtn">开始上传</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


        </div>
        
        

    <!-- 全局js -->
    <script>
        //读取Excel数据
        function getExcelData(obj) {
            $("#tips").html("正在读取，请稍后...");
            $("#fileExcel").css("display", "none");
            var reader = new FileReader();

            //文件加载完成后调用
            reader.onload = function(e) {
                var data = e.target.result;

                const workbook = XLSX.read(data, {
                    type: 'array'
                })
                //获取json格式的Excel数据
                var jsonData0 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {
                    defval: 'null' //单元格为空时的默认值
                });
                //表格存在多个 Sheet 可以使用下标获取数据
                //var jsonData1 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[1]], {});

                // 如果表格内存在日期，需要处理一下
                /* for (var i = 0; i < jsonData0.length; i++) {
                    jsonData0[i]["日期"] = formatDate(jsonData0[i]["日期"]);
                } */
                download("data.json", JSON.stringify(jsonData0));
                $("#tips").html("");
                $("#fileExcel").css("display","block");
            };

            //加载文件
            reader.readAsArrayBuffer(obj.files[0]);
        }

        //下载文件
        function download(filename, text) {
            var pom = document.createElement('a');
            pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            pom.setAttribute('download', filename);
            if (document.createEvent) {
                var event = document.createEvent('MouseEvents');
                event.initEvent('click', true, true);
                pom.dispatchEvent(event);
            } else {
                pom.click();
            }
        }

        //将excel日期转为字符串格式
        var format = "-";
        function formatDate(numb) {
            const time = new Date((numb - 1) * 24 * 3600000 + 1)
            time.setYear(time.getFullYear() - 70)
            const year = time.getFullYear() + ''
            const month = time.getMonth() + 1 + ''
            const date = time.getDate() - 1 + ''
            if (format && format.length === 1) {
                return year + format + month + format + date
            }
            return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
        }
    </script>
</script>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/xlsx.core.min.js"></script>
    <script src="js/bootstrap.min.js?v=3.3.7"></script>


    <script src="js/plugins/webuploader/webuploader.min.js"></script>
<script src="js/demo/webuploader-demo.js"></script>

<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = 'js/plugins/webuploader';
</script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });


          
        });

        
    </script>
</body>

</html>
